<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>明星教练</title>
    <link rel="stylesheet" href="css/fore/order.css">
    <link rel="stylesheet" href="css/fore/index.css">
    <link rel="stylesheet" href="css/fore/coach.css">
    <script src="js/jquery/2.0.0/jquery.min.js"></script>
    <link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
    <script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
    <script src="js/vue.min.js"></script>
    <script src="js/fetch.min.js"></script>
    <script src="js/axios.min.js"></script>

</head>
<body>
<div class="header">
    <div class="top">
        <div class="top-logo fl">
            <a id="logo" href="index.html"><img src="img/car-logo.png" alt="" class="fl"
                                                style="margin-top: 20px;width: 45px"><span
                    class="top-logo-text">练车预约系统</span></a>
        </div>
    </div>
    <div class="header-nav">
        <ul id="nav-list">
            <li class="nav-list-li"><a href="index.html">首页</a></li>
            <li class="nav-list-li"><a href="selectcoach.html">明星教练</a></li>
            <li class="nav-list-li"><a href="testorder.html">考试报名</a></li>
            <li class="nav-list-li"><a href="order.html">练车预约</a></li>
            <li class="nav-list-li"><a href="teachingvideo.html">驾考视频</a></li>
            <li class="nav-list-li"><a href="register.html">驾校报名</a></li>
        </ul>
    </div>
</div>
<div class="content" id="allContent">
    <p class="content-p">明星教练一点通</p>


    <div class="item" v-for="(c,index) in cs" v-if="index % 2 == 0">
        <div class="item-l fl">
            <img :src="['img/coach/' + c.user.pic]" alt="">
            <div class="item-con fl">
                <p class="top-bar">
                    <span class="title">{{c.name}}</span>
                    <span class="renzheng"></span>
                    <span class="qianyue">{{c.tage}}年教龄</span>
                </p>
                <p class="item-con-bottom">&nbsp; &nbsp; &nbsp; &nbsp; 执教{{c.type}},驾校星级教练.
                    电话:{{c.telephone}}，欢迎咨询。{{c.introduce}}
                </p>
                <span class="item-bottom"><a :href="['comment.html?cid=' + c.id]">查看教练评价</a></span>&nbsp;&nbsp;
                <a @click="select(c.id,c.type)">选择此教练</a>
            </div>
        </div>
        <div class="item-l fl" v-if="index < cs.length-1">
            <img :src="['img/coach/' + cs[index+1].user.pic]" alt="">
            <div class="item-con fl">
                <p class="top-bar">
                    <span class="title">{{cs[index+1].name}}</span>
                    <span class="renzheng"></span>
                    <span class="qianyue">{{cs[index+1].tage}}年教龄</span>
                </p>
                <p class="item-con-bottom">&nbsp; &nbsp; &nbsp; &nbsp;
                    执教{{cs[index+1].type}}，驾校星级教练，电话:{{cs[index+1].telephone}}，欢迎咨询。
                    {{cs[index+1].introduce}}
                </p>
                <span class="item-bottom"><a :href="['comment.html?cid=' + cs[index+1].id]">查看教练评价</a></span>&nbsp;&nbsp;
                <a @click="select(cs[index+1].id, cs[index+1].type)">选择此教练</a>
            </div>
        </div>
    </div>
</div>
<div class="footer">
    <p>
        Good CarTeacher©2018 | QQ:123456789
        <a href="#">|关于我们</a>
        <a href="login.html">|驾校登录</a>
    </p>
</div>


<script>
    var url = "fore_coach_list";
    new Vue({
        el: '#allContent',
        data: {
            cs: []
        },
        mounted: function () {
            self = this;
            fetch(url).then(function (response) {
                response.json().then(function (jsonObject) {
                    self.cs = jsonObject.cs; //数组
                    console.log(self.cs);
                }).catch(function (err) {
                    console.log("Fetch错误：" + err);
                })
            })
        },
        methods: {
            select: function (cid,type) {

                let queryUrl = "foreStudentSelectCoach?cid=" + cid + "&coachType=" + type;
                self = this;
                axios.get(queryUrl).then(function (response) {
                    let flag = response.data.flag;
                    switch (flag) {
                        case "用户未登录":
                            if(confirm("未登录!!! 是否前往登录界面")){
                                window.location.replace("login.html"); break;
                            }
                            break;
                        case "教练类型不匹配":
                            alert("教练类型不匹配")
                            break;
                        case "success":
                            alert("选择成功");
                            break;
                        case "已有教练":
                            alert("已有教练，如想更换教练请与驾校沟通")
                            break;


                    }
                })


            }
        }
    });
</script>

</body>
</html>